<div class="story-container" [ngStyle]="{'background-color': activeStoryOption.storyActiveColor}">
  <ion-slides pager="false" [options]="storyCubeOptions" (ionSlidesDidLoad)="storyDidLoad($event)" #story>
    <ion-slide *ngFor="let storyItem of stories; let storyIndex = index">
      <div class="story-item-container">
        <ion-header class="ion-no-border story-header"
          [ngClass]="{'ion-hide': storyItem.items[activeStoryOption.activeStoryIndex].tap}">
          <div class="progress-bar-story">
            <ion-progress-bar *ngFor="let content of storyItem.items; let contentIndex = index"
              [value]="!contentIndex ? '0.6' : 0"></ion-progress-bar>
          </div>
          <ion-toolbar>
            <ion-item lines="none" class="ion-no-padding" style="pointer-events: fill;">
              <ion-avatar slot="start">
                <img id="avatar" [src]="storyItem.owner.avatar" />
              </ion-avatar>
              <ion-label style="font-weight: bold;">
                <ion-text>
                  {{storyItem.owner.username}}
                </ion-text>
              </ion-label>
              <ion-buttons slot="end" class="ion-no-margin">
                <ion-button class="ion-no-margin ion-no-padding" (click)="closeModal($event)">
                  <ion-icon slot="icon-only" name="close-outline"></ion-icon>
                </ion-button>
              </ion-buttons>
            </ion-item>
          </ion-toolbar>
        </ion-header>

        <!--<span class="story-change prev" (click)="slidePrev($event)"></span>
        <span class="story-change next" (click)="slideNext($event)"></span> -->

        <ng-container *ngFor="let content of storyItem.items; let contentIndex = index">
          <img [id]="'story-image-' + contentIndex" [src]="content.src" (load)="imageLoaded($event, contentIndex)"
            *ngIf="contentIndex === activeStoryOption.activeStoryIndex" />
        </ng-container>

        <ion-footer class="story-footer"
          [ngClass]="{'ion-hide': storyItem.items[activeStoryOption.activeStoryIndex].tap}">
          <ion-toolbar>
            <ion-buttons slot="start">
              <ion-button (click)="addStory($event)">
                <ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
              </ion-button>
            </ion-buttons>

            <ion-buttons slot="end">
              <ion-button (click)="shareStory($event)">
                <ion-icon slot="icon-only" name="arrow-redo-circle-outline"></ion-icon>
              </ion-button>
              <ion-button (click)="storyOptions($event)">
                <ion-icon slot="icon-only" ios="ellipsis-horizontal-circle-outline"
                  md="ellipsis-vertical-circle-outline">
                </ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-toolbar>
        </ion-footer>
      </div>
    </ion-slide>
  </ion-slides>
</div>